<!-- 后台管理系统 搜索组件 -->
<template>
  <div class="pagination">
    <el-pagination
      v-model:currentPage="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[ 4, 8, 10, 20]"
      small
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script setup>
const props = defineProps({
  pagination: {
    typeof: Object,
    default: {},
  },
})
const emit = defineEmits(['handleSizeChange', 'handleCurrentChange'])

const handleSizeChange = (val) => {
  emit('handleSizeChange', val)
}
const handleCurrentChange = (val) => {
  emit('handleCurrentChange', val)
}
</script>
<style lang='less' scoped>
.pagination {
  margin-top: 15px;
  float: right;
}
</style>